<template>
<div>
  <el-button type="text" @click="dialogVisible = true;fetchData()">销售详情</el-button>
</div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        data: [],
        saleInfo: [],
        priceChartData: [],
        priceTableData: [],
      }
    },
    methods: {
      fetchData(startDate, endDate) {
        this.$http.get('/front/saleDetailD', {
          params: { startDate, endDate }
        }).then(res => {
          this.saleInfo = res.data.saleInfo
          this.priceChartData = res.data.priceChartData
          this.priceTableData = res.data.priceTableData
          let myChart = this.$echarts.init(document.getElementById('saleDetailSummaryChart'));
          let option = {
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: this.saleInfo.map(item => item.month)
              },
              yAxis: [{
                name: '销售量（万件）',
                type: 'value'
              }, {
                name: '销售额（万元）',
                type: 'value'
              }],
              series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: this.saleInfo.map(item => item.count)
              }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: this.saleInfo.map(item => item.amount)
              }]
          };
          myChart.setOption(option);
          let priceChart = this.$echarts.init(document.getElementById('salePriceChart'));
          let priceChartOption = {
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: this.priceChartData.map(item => item.month)
              },
              yAxis: [{
                name: '销售量（万件）',
                type: 'value'
              }, {
                name: '销售额（万元）',
                type: 'value'
              }],
              series: [{
                  name: '销售量',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth:true,
                  itemStyle: {
                    color: '#B0ACEC'
                  },
                  data: this.priceChartData.map(item => item.count)
              }, {
                  name: '销售额',
                  type: 'line',
                  smooth:true,
                  itemStyle: {
                    color: '#9DD6F9'
                  },
                  yAxisIndex: 1,
                  data: this.priceChartData.map(item => item.amount)
              }]
          };
          priceChart.setOption(priceChartOption);
        })
      },
    }
  };
</script>

<style lang="less" scoped>
  .mainPage {
    background-color: #E8EEF4
  }
  .summaryHeader {
    padding: 10px 20px;
  }
  .itemContainer {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 50px;
    padding: 5px 15px;
    line-height: 40px;
  }
  .itemTitle.white {
    background-color: white;
  }
  .pickerOption {
    float: right;
  }

  .lightYellow {
    color: #FFBF13;
  }
  .purple {
    color: #B0ACEC
  }
  .lightBlue {
    color: #9DD6F9
  }
  .catagoryList {
    display: flex;
    flex-wrap: wrap;
  }
  .catagoryContainer {
    width: 25%;
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .itempie {
    margin: 10px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
  }
  .priceDetail {
    display: flex;
    > div {
      flex: 1;
      flex-basis: 50%;
      margin: 10px;
    }
  }
</style>
